<template>
  <div class="login">
      <!--主界面-->
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="register-form" >
          <h3 class="title">HotTop登录</h3>
          <el-form-item  prop="username">
            <el-input v-model="ruleForm.username" maxlength="12" ref="username" placeholder="用户名" type="text">
              <i slot="prefix" class="el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model="ruleForm.password" autocomplete="off" placeholder="密码"  type="password">
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code" >
            <div  style="display: flex;">
              <el-input  v-model="ruleForm.code"  placeholder="请输入您的验证码"  ref="code">
                <i slot="prefix" class="el-icon-circle-check"></i>
              </el-input>
              <div class="login-code" @click="refreshCode">
                <!--验证码组件-->
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" style="margin-left:30px;width:40%;">登录</el-button>
              <el-button @click="resetForm('ruleForm')" style="width:40%;" >重置</el-button>
          </el-form-item>
          <div style="float: right;">
            <router-link class="link-type" :to="'/register'">注册</router-link>
            <router-link class="link-type" :to="'/'">游客登录</router-link>
          </div>
        </el-form>
    <div class="el-register-footer">
      <span>Copyright © 2021-2022 hottop All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import SIdentify  from '../components/SIdentify'
export default {
  components: { SIdentify },
  name: 'Login',
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",
      code:"",//text框输入的验证码
      ruleForm: {
        password: '',
        username: ''
      },
      rules: {
        password: [
          {required: true, message: '请输入密码',trigger: 'blur'},
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码',trigger: 'blur'},
        ],
      }
    };
  },
  methods: {
    //登录
    submitForm(formName) {
      const _this = this
      if (_this.ruleForm.code===_this.identifyCode){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 提交逻辑
            this.$axios.post(this.$base_url+'login', this.ruleForm).then((res) => {
              if (res.data.code ===200){
                const token = res.headers['authorization']
                _this.$store.commit('SET_TOKEN', token)
                _this.$store.commit('SET_USERINFO', res.data.data)
                _this.$router.push("/")
              } else {
                this.$message.error(res.data.msg);
                this.$nextTick(() => {
                  this.$refs.username.focus()
                },100)
                this.refreshCode()
                return false
              }
            })
          } else {
            this.refreshCode()
            return false;
          }
        });
      } else{
        this.$message.error("验证码错误");
        this.$nextTick(() => {
          this.$refs.code.focus()
        },100)
        this.refreshCode()
        return false
      }

    },
    //清空用户名密码
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
       this.identifyCode = "";
       this.makeCode(this.identifyCodes, 4);
   },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.username.focus()
    },100)
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  created() {
    this.refreshCode()
  }
}
</script>

<style scoped>
.login{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting/2021/04/23/first87.png")!important;
  background-size: cover;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
}

 /*验证码样式*/
.code{
  width:124px;
  height:31px;
  border:1px solid rgba(186,186,186,1);
}
.login-code{
  cursor: pointer;
}
.link-type{
  margin: 5px;
}
</style>